<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎页</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="chart-container">
      <el-card id="chart1"></el-card>
      <el-card id="chart2"></el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
console.log(echarts)

export default {
	data() {
		return {}
	},
	mounted() {
		this.displayChart1()
	},
	methods: {
		displayChart1() {
			var chart1 = echarts.init(document.getElementById('chart1'))

			var option = {
				title: {
					text: '订单趋势',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line',
					},
				},
				xAxis: {
					type: 'category',
					data: ['03.20', '03.21'],
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						type: 'line',
						smooth: true,
						data: [260, 406]
					},
				],
            }
            
            chart1.setOption(option)
		},
	},
}
</script>

<style lang="less" scoped>
.chart-container {
	display: flex;
	justify-content: center;
	.el-card {
        width: 50%;
        height: 400px;
        padding: 20px;
	}
}
</style>